﻿<mockups:WindowsPhoneChrome 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:mockups="clr-namespace:Microsoft.Expression.Prototyping.WindowsPhone.Mockups;assembly=WindowsPhone.Mockups"
    xmlns:pc="http://schemas.microsoft.com/prototyping/2010/controls"
    xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity"
    xmlns:pi="http://schemas.microsoft.com/prototyping/2010/interactivity"
    xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
    xmlns:SampleData="clr-namespace:Expression.Blend.SampleData.SamplePlaylists"
    mc:Ignorable="d"
    x:Class="ToyundaPhonePrototypeScreens.Playlists"
    x:Name="PhoneChrome">
	<mockups:WindowsPhoneChrome.Resources>
		<SampleData:SamplePlaylists x:Key="SamplePlaylists" d:IsDataSource="True"/>
		<DataTemplate x:Key="PlaylistsItemTemplate">
			<Grid>
				<i:Interaction.Triggers>
					<i:EventTrigger EventName="MouseLeftButtonDown">
						<pi:NavigateToScreenAction TargetScreen="ToyundaPhonePrototypeScreens.Playlist"/>
					</i:EventTrigger>
				</i:Interaction.Triggers>
				<Grid.ColumnDefinitions>
					<ColumnDefinition/>
					<ColumnDefinition Width="Auto"/>
				</Grid.ColumnDefinitions>
				<TextBlock Text="{Binding PlaylistName}" Style="{StaticResource BasicTextBlock-Sketch}" FontSize="{StaticResource PhoneFontSizeMedium}"/>
				<TextBlock Text="{Binding Count}" Style="{StaticResource BasicTextBlock-Sketch}" Grid.Column="1" Foreground="{StaticResource Accent-Sketch}"/>
			</Grid>
		</DataTemplate>
	</mockups:WindowsPhoneChrome.Resources>
    <i:Interaction.Triggers>
        <i:EventTrigger EventName="OrientationChanged">
            <i:Interaction.Behaviors>
                <ei:ConditionBehavior>
                    <ei:ConditionalExpression>
                        <ei:ComparisonCondition LeftOperand="{Binding PageOrientation, ElementName=PhoneChrome}"
                                                RightOperand="Landscape" />
                    </ei:ConditionalExpression>
                </ei:ConditionBehavior>
            </i:Interaction.Behaviors>
            <mockups:GoToStateAction StateName="Landscape"
                                     TargetObject="{Binding ElementName=LayoutRoot}"
                                     TargetName="LayoutRoot" />
        </i:EventTrigger>
        <i:EventTrigger EventName="OrientationChanged">
            <i:Interaction.Behaviors>
                <ei:ConditionBehavior>
                    <ei:ConditionalExpression>
                        <ei:ComparisonCondition LeftOperand="{Binding PageOrientation, ElementName=PhoneChrome}"
                                                RightOperand="Portrait" />
                    </ei:ConditionalExpression>
                </ei:ConditionBehavior>
            </i:Interaction.Behaviors>
            <mockups:GoToStateAction StateName="Portrait"
                                     TargetObject="{Binding ElementName=LayoutRoot}"
                                     TargetName="LayoutRoot" />
        </i:EventTrigger>
    </i:Interaction.Triggers>

    <mockups:WindowsPhoneChrome.BackButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateBackAction />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/back.png" />
        </Button>
    </mockups:WindowsPhoneChrome.BackButton>

    <mockups:WindowsPhoneChrome.HomeButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="ToyundaPhonePrototypeScreens.Home" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/home.png" />
        </Button>
    </mockups:WindowsPhoneChrome.HomeButton>

    <mockups:WindowsPhoneChrome.SearchButton>
        <Button Style="{StaticResource Chrome-Button}">
            <i:Interaction.Triggers>
                <i:EventTrigger EventName="Click">
                    <pi:NavigateToScreenAction TargetScreen="ToyundaPhonePrototypeScreens.Search" />
                </i:EventTrigger>
            </i:Interaction.Triggers>
            <Image Source="/AppBarIcons/search.png" />
        </Button>
    </mockups:WindowsPhoneChrome.SearchButton>

    <Grid x:Name="LayoutRoot" DataContext="{Binding Source={StaticResource SamplePlaylists}}">
    	<Grid.RowDefinitions>
    		<RowDefinition Height="Auto"/>
    		<RowDefinition/>
    		<RowDefinition Height="Auto"/>
    	</Grid.RowDefinitions>
        <VisualStateManager.CustomVisualStateManager>
            <ei:ExtendedVisualStateManager />
        </VisualStateManager.CustomVisualStateManager>
        <VisualStateManager.VisualStateGroups>
        	<VisualStateGroup x:Name="CommonStates"
        		ei:ExtendedVisualStateManager.UseFluidLayout="True">
        		<VisualState x:Name="Portrait" />
        		<VisualState x:Name="Landscape">
        			<Storyboard>
        				<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(WindowsPhoneChrome.PageOrientation)"
        					Storyboard.TargetName="PhoneChrome">
        					<DiscreteObjectKeyFrame KeyTime="0">
        						<DiscreteObjectKeyFrame.Value>
        							<mockups:PageOrientation>Landscape</mockups:PageOrientation>
        						</DiscreteObjectKeyFrame.Value>
        					</DiscreteObjectKeyFrame>
        				</ObjectAnimationUsingKeyFrames>
        			</Storyboard>
        		</VisualState>
        	</VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    	<StackPanel Style="{StaticResource TitlePanelStyle}">
    		<TextBlock Style="{StaticResource TitleBlockStyle}"/>
    		<TextBlock Text="PLAYLISTS" Style="{StaticResource PhoneTextTitle1Style-Sketch}" Margin="7,-9,0,0"/>
    	</StackPanel>
    	<ListBox ItemTemplate="{StaticResource PlaylistsItemTemplate}" ItemsSource="{Binding Playlists}" Grid.Row="1" Style="{StaticResource ListBox-SketchStretch}" Margin="12,0"/>
    	<mockups:ApplicationBarMockup d:LayoutOverrides="Height" Grid.Row="2">
    		<mockups:ApplicationBarMockup.IconButtonsContent>
    			<StackPanel HorizontalAlignment="Center" Orientation="Horizontal">
    				<mockups:ApplicationBarIconButton Content="New playlist" ImageSource="/AppBarIcons/new.png"/>
    			</StackPanel>
    		</mockups:ApplicationBarMockup.IconButtonsContent>
    		<mockups:ApplicationBarMockup.MenuItemsContent>
    			<StackPanel/>
    		</mockups:ApplicationBarMockup.MenuItemsContent>
    	</mockups:ApplicationBarMockup>
    </Grid>
</mockups:WindowsPhoneChrome>
